<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* input+span {
            display: none;
        } */
    </style>
</head>

<body>
    <!-- action=""  提交当前页 -> 会刷新 -->
    <!-- 内联绑定事件 阻止表单默认提交 -->
    <!-- <form action="./01 复习.html" onsubmit="return false" method="get"></form> -->
    <form action="./01 复习.html" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user" placeholder="用户名">
            <span></span>
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="">班&emsp;级:</label>
            <select name="class" id="">
                <option value="2201">2201</option>
                <option value="2202">2202</option>
                <option value="2203">2203</option>
                <option value="2204">2204</option>
                <option value="2205">2205</option>
                <option value="2206">2206</option>
                <option value="2207">2207</option>
                <option value="2208">2208</option>
                <option value="2209">2209</option>
                <option value="2210">2210</option>
                <option value="2211">2211</option>
                <option value="2212">2212</option>
                <option value="2213">2213</option>
                <option value="2214">2214</option>
                <option value="2215">2215</option>
                <option value="2216">2216</option>
                <option value="2217">2217</option>
                <option value="2218">2218</option>
                <option value="2219">2219</option>
                <option value="2220">2220</option>
            </select>
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
<script>

    var userInp = document.querySelector("[name='user']");
    var pwdInp = document.querySelector("[name='pwd']");
    var classSel = document.querySelector("[name='class']");

    var form = document.querySelector("form");


    // onfocus   表单聚焦时触发(聚焦 -> 点击文本框,文本框变为可输入的状态)
    // onblur    表单失焦时触发(失焦 -> 点击文本框以外, 文本框从可输入变为不可输入)
    // onchange  表单内容发生改变时触发  (内容改变 + 失焦)
    //           a. 用在input textarea中  => 1. 内容发生改变(相对于聚焦时输入框的原本内容)  2. 失焦 或 按回车键时触发(不建议在form中使用,回车键也会触发表单提交)
    //           b. 用在下拉框中 -> 下拉框选项切换时触发

    // oninput   表单内容发生改变时触发 (即时输入 内容改变时立即触发)

    // onsubmit  表单提交 -> 绑定给form元素,由提交按钮触发
    // onreset   表单重置 -> 绑定给form元素,由重置按钮触发
    


    // userInp.onfocus = function () {
    //     var tipsSpan = this.nextElementSibling;
    //     tipsSpan.textContent = "用户名需要由数字,字母,下划线组成,6-12位,且不能以数字开头"
    //     tipsSpan.style.fontSize = "12px";
    //     tipsSpan.style.color = "orange";
    // }

    // onblur    表单失焦时触发  每次失焦均会触发(如果内容没有改变 -> 再次触发失焦 -> 多次宜居)
    // userInp.onblur = function () {
    //     console.log("onblur");
    //     var user = userInp.value;

    //     user = user.replace(/ /g, "");  //去所有空格
    //     userInp.value = user;

    //     var tipsSpan = this.nextElementSibling;
    //     if (user.length >= 6 && user.length <= 12) {
    //         tipsSpan.textContent = "√";
    //         tipsSpan.style.fontSize = "12px";
    //         tipsSpan.style.color = "green";
    //     } else {
    //         tipsSpan.textContent = "用户名需要6-12位之间"
    //         tipsSpan.style.fontSize = "12px";
    //         tipsSpan.style.color = "red";
    //     }
    // }

    // userInp.onchange = function () {
    //     console.log("onchange");
    //     var user = userInp.value;

    //     user = user.replace(/ /g, "");  //去所有空格
    //     userInp.value = user;

    //     var tipsSpan = this.nextElementSibling;
    //     if (user.length >= 6 && user.length <= 12) {
    //         tipsSpan.textContent = "√";
    //         tipsSpan.style.fontSize = "12px";
    //         tipsSpan.style.color = "green";
    //     } else {
    //         tipsSpan.textContent = "用户名需要6-12位之间"
    //         tipsSpan.style.fontSize = "12px";
    //         tipsSpan.style.color = "red";
    //     }
    // }

    // classSel.onchange = function () {
    //     console.log(this.value); //下拉框取值
    // }

    /* userInp.oninput = function () {
        var user = userInp.value;
        console.log("oninput", user);

        user = user.replace(/ /g, "");  //去所有空格
        userInp.value = user;

        var tipsSpan = this.nextElementSibling;
        if (user.length >= 6 && user.length <= 12) {
            tipsSpan.textContent = "√";
            tipsSpan.style.fontSize = "12px";
            tipsSpan.style.color = "green";
        } else {
            tipsSpan.textContent = "用户名需要6-12位之间"
            tipsSpan.style.fontSize = "12px";
            tipsSpan.style.color = "red";
        }
    } */


    form.onsubmit = function () {
        console.log("表单提交");

        return false;   // 阻止浏览器默认行为  (在此处阻止表单默认提交数据到action所指url)
    }

    form.onreset = function () {
        console.log("表单重置");
    }






</script>

</html>